import React, { useState } from 'react'
import memoize from 'memoize-one'

const AAA = function(props) {
    // console.log(3)
    return (
        <div>
            <h1>AAA</h1>
        </div>
    )
}
// 这个计算属性，在函数式的组件里，将memoize放到组件外
const getNewString = memoize((str) => {
    console.log('memoize')
    return str + 'world!'
})
const Child = function(props) {
    // console.log(2)

    return (
        <div>
            <h1>Child</h1>
            <AAA />
            {getNewString(props.title)}
        </div>
    )
}

export default function Memoization() {
    // console.log(1)
    const [title, setTitle] = useState('hello')
    const [count, setCount] = useState(0)
    return (
        <div>
            <Child title={title}></Child>
            <button onClick={()=>setTitle('hello ')}>change</button>
            <button onClick={()=>setCount(100)}>change2</button>
        </div>
    )
}